<template>
    <div class="video-detail">
        <div class="detail-left">
            <h2>MV详情</h2>
            <!-- <h2>MV详情</h2> -->
            <div class="video">
                <video :src="mvUrl"  controls="controls" autoplay="autoplay" loop="loop"></video>
            </div>
            <!-- 视频介绍-->
            <div class="video-introduce">
                <div class="author-img">
                    <img :src="videoInfo.artists[0].img1v1Url" />
                    <span>{{videoInfo.artistName}}</span>
                </div>
                <div class="video-text">
                    <h2>{{videoInfo.name }}</h2>
                    <span>发布时间：{{videoInfo.publishTime}}</span>
                    <span>播放量：{{videoInfo.playCount}}</span>
                </div>
            </div>
          
        </div>
        <div class="detail-right">
            <h2>相似MV</h2>
            <MvListItem  v-for="item in similarvideo" :key="item.id" :mv="item"/>  
        </div>
        
    </div>
</template>
<script>
import MvListItem from '@/components/content/mvlist/MvListItem.vue';
export default {
    inject:['reload'],
    name: "",
    components: { MvListItem },
    data() {
        return {
            id: "",
            // 视频类型
            videoType: "",
            // 视频信息
            videoInfo: {},
            // mv播放地址
            mvUrl: "",
            // 相似视频
            similarvideo: [],
            // 视频的播放地址
            videoUrl:'',
        };
    },
    created() {
        // 获取路由参数
        this.id = this.$route.params.id;
        this.videoType = this.$route.params.type;
        // 判断是MV还是视频
        if (this.videoType == "mv") {
            // 获取mv的信息
            this.getMVDetailBy();
            // 获取mv的播放地址
            this.getMVUrlBy();
            // 获取相似mv
            this.getSimiMVBy();
        } 
    },
    methods: {
        // 获取MV的信息
        async getMVDetailBy() {
            let videoRes = await this.$API.video.getMvDetail(this.id);
            this.videoInfo = videoRes.data;
        },
        // 获取mv的播放地址
        async getMVUrlBy() {
            let videoUrlRes = await this.$API.video.getMVUrl(this.id);
            this.mvUrl = videoUrlRes.data.url;
        },
        // 获取相似MV
        async getSimiMVBy() {
            let simiAideo = await this.$API.video.getSimiMV(this.id);
            this.similarvideo = simiAideo.mvs;
        },
    },
    watch:{
        $route(to,form){
            if(to !== form){
                this.reload();
            }
        }
    }
    
}
</script>
<style lang="less" scoped>
    .video-detail{
        display: flex;
        .detail-left{
            width: 900px;
            .video{
                width: 100%;
                video{
                    width: 100%;
                }
            }
            .video-introduce{
                margin-left: 10px;
                .author-img{
                    img{
                        width: 50px;
                        height: 50px;
                        border-radius: 50% 50%;
                        margin-right: 10px;
                        margin-bottom: 10px;
                    }
                    span{
                        font-size: 16px;
                        &:hover{
                            color: var(--themeColor);
                        }
                    }
                }
                .video-text{
                    h2{
                        margin-bottom: 10px;
                    }
                    span{
                        margin-right: 10px;
                    }
                }
            }
        }
        .detail-right{
             width: 400px;
             overflow-y: scroll;
             overflow-x: hidden;
             height: 520px;
             h2{
                margin-left: 10px;
             }        
        }
    }
</style>